import React from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { Menu } from "antd";

// MenuItem 类型
interface MenuItem {
  key: string;
  label: string;
  icon?: React.ReactNode;
  path: string;
}

interface BottomMenuProps {
  items: MenuItem[];
}

const BottomMenu: React.FC<BottomMenuProps> = ({ items }) => {
  const navigate = useNavigate();
  const location = useLocation();

  return (
    <div
      style={{
        position: "fixed",
        bottom: 0,
        width: "100%",
        borderTop: "1px solid #f0f0f0",
        background: "#fff",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-around",
        padding: "0 10px",
        height: 70,
        zIndex: 100,
      }}
    >
      {/* 左侧菜单 */}
      <Menu
        mode="horizontal"
        selectedKeys={[location.pathname]}
        style={{ flex: 1, display: "flex", justifyContent: "space-around" }}
        onClick={(e) => {
          const target = items.find((itm) => itm.key === e.key);
          if (target) navigate(target.path);
        }}
      >
        <Menu.Item key={items[0].key} icon={items[0].icon}>
          {items[0].label}
        </Menu.Item>
      </Menu>

      {/* 右侧菜单 */}
      <Menu
        mode="horizontal"
        selectedKeys={[location.pathname]}
        style={{ flex: 1, display: "flex", justifyContent: "space-around" }}
        onClick={(e) => {
          const target = items.find((itm) => itm.key === e.key);
          if (target) navigate(target.path);
        }}
      >
        <Menu.Item key={items[1].key} icon={items[1].icon}>
          {items[1].label}
        </Menu.Item>
      </Menu>

      {/* 样式 */}
      <style >{`
        .status-circle {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background-color: "#67C23A" };
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-weight: bold;
          font-size: 16px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          transition: transform 0.2s, box-shadow 0.2s;
        }

        /* 放大效果 */
        .status-circle:hover {
          transform: scale(1.2);
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
        }

        /* 水波纹扩散效果 */
        .status-circle::before {
          content: "";
          position: absolute;
          width: 200%;
          height: 200%;
          top: -50%;
          left: -50%;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.3);
          transform: scale(0);
          opacity: 0;
        }

        .status-circle:hover::before {
          animation: ripple 1s ease-out forwards;
        }

        @keyframes ripple {
          0% {
            transform: scale(0);
            opacity: 0.6;
          }
          100% {
            transform: scale(1);
            opacity: 0;
          }
        }
      `}</style>
    </div>
  );
};

export default BottomMenu;
